<template>
  <div class="category">
    <div class="category-search">
      <van-search v-model="searchValue" placeholder="请输入搜索商品名" @input="onSearch" @clear="searchValue = ''" shape="round" />
    </div>

    <div class="sidebar">
      <div class="first">
        <van-sidebar v-model="activeKey" @change="onChange">
          <van-sidebar-item v-for="(item,index) in list" :key="index" :title="item.type_name" />
        </van-sidebar>
      </div>

      <div class="secondary" id="secondary">
        <div class="childrens" v-if="secondary">
          <div class="childrens_list">
            <div class="list_scroll">
              <div class="item" v-for="(item, index) in secondary" :key="index" :class="{active: childrenKey == index }" :id="`roll${index}`" @click="changeChidren(index)">{{item.type_name}}</div>
            </div>
          </div>
          <div class="childrens_open">
            <van-icon name="arrow-down" @click="showChildrenList = true" />
          </div>
        </div>

        <div class="product_list">
          <van-list v-model="loading" :finished="finished" :finished-text="!loading?'没有更多了~':''" :error.sync="err" error-text="加载失败，点击这里重试" @load="getCategoryList">
            <van-card v-for="(item, index) in productList" :key="index" class="product" :thumb="`${resourceURL}${item.imageurl}`" :title="item.product_name" @click="selectProduct(item.product_id)">
              <template #price>
                <div class="price1">￥{{item.mprice}}</div>
                <div class="price2">￥{{item.price}}</div>
              </template>
              <template #num>
                <van-image class="join" :src="require('@/assets/img/carticon.png')" />
              </template>
            </van-card>
            <van-empty v-if="productList.length==0 && !loading" />
          </van-list>
        </div>
      </div>
    </div>

    <van-popup class="all_childrens" v-model="showChildrenList" :get-container="getContainer" position="top" :style="{ minHeight: '20%' }">
      <div class="all_list">
        <div class="item" v-for="(item, index) in secondary" :key="index" :class="{active: childrenKey == index }" @click="changeChidren(index)">{{item.type_name}}</div>
      </div>
      <div class="packup" @click="showChildrenList = false">
        <div class="bottom_text">
          <span>点击收起 </span>
          <van-icon name="arrow-up" />
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  data () {
    return {
      searchValue: '',
      activeKey: 0,
      childrenKey: 0,
      list: [],
      secondary: [],
      productList: [],
      children_type_id: null,
      err: false,
      loading: false,
      finished: false,
      showChildrenList: false,
    };
  },
  methods: {
    // 搜索商品
    onSearch () {
      setTimeout(() => {
        this.productList = []
        this.getProductList(this.children_type_id)
      }, 500);
    },
    //切换左侧一级分类
    onChange (index) {
      this.activeKey = index
      this.childrenKey = 0
      this.secondary = []
      this.productList = []
      this.searchValue = ''
      this.getCategoryList(this.activeKey)
    },
    //切换右侧二级分类
    changeChidren (index) {
      this.productList = []
      this.searchValue = ''
      this.childrenKey = index
      this.children_type_id = this.secondary[index].type_id
      this.getProductList(this.children_type_id)
      this.showChildrenList = false
      setTimeout(() => {
        document.querySelector(`#roll${index}`).scrollIntoView({
          behavior: 'smooth', //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。
          block: 'center',//定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start"。
          inline: 'center'//"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
        })
      }, 0);
    },
    // 获取分类
    getCategoryList () {
      this.$axios.get(this.$api.GetTypeList).then(res => {
        this.list = res.data.data
        this.secondary = this.list[this.activeKey].children
        this.children_type_id = this.list[this.activeKey].children[this.childrenKey].type_id
        this.getProductList(this.children_type_id)
      })
    },
    // 根据二级分类获取商品列表
    getProductList (id) {
      Toast.loading({ message: '加载中...', duration: 0 })
      this.loading = true
      this.$axios.get(this.$api.productlist, {
        params: {
          product_name: this.searchValue,//搜索商品名
          type_id: id,//二级分类id
          page: parseInt(this.productList.length / 10) + 1,  //页码
          is_page: 2
        }
      }).then((res) => {

        if (res.data.code == 1) {
          let result = res.data

          if (result.data) {
            this.productList.push(...result.data)
          }

          this.loading = false

          Toast.clear()
          if (result.data.length < 10) {
            this.finished = true // 大于所有条数则结束加载
          }
          if (result.length > 10) this.page++
        } else {
          // 加载失败时
          this.err = true
          this.loading = false
        }
      })
    },
    // 将popup挂载到secondary节点
    getContainer () {
      return document.querySelector('#secondary');
    },
    //打开商品
    selectProduct (id) {
      this.$router.push({ name: 'product', query: { id } })
    },

  },
}
</script>

<style lang="less" scoped>
.category {
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
  .category-search {
    width: 100%;
    background-color: #f1f1f1;
    border-bottom: 6px solid #f1f1f1;
    .van-search {
      height: 70px;
      padding: 16px;
    }
  }
  .sidebar {
    display: flex;
    min-height: calc(100vh - 76px - 50px);
    .first {
      width: 100px;
      background-color: #f1f1f1;
      /deep/ .van-sidebar {
        width: 100px;
        height: 100%;
        background-color: #f1f1f1;
        .van-sidebar-item {
          padding: 14px;
          background-color: #f1f1f1;
        }
        .van-sidebar-item--select {
          font-size: 14px;
          font-weight: bold;
          background-color: #fff;
        }
      }
    }
    .secondary {
      position: relative;
      flex: 1;
      min-height: calc(100vh - 76px - 50px);
      overflow-y: auto;
      background-color: #fff;
      padding: 12px;
      box-sizing: border-box;
      .childrens {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 24px;
        margin-bottom: 12px;
        .childrens_list {
          flex: 1;
          display: flex;
          overflow-x: auto;
          &::-webkit-scrollbar {
            display: none;
          }
          .list_scroll {
            display: flex;
            font-size: 12px;
            justify-content: center;
            align-items: center;
            flex-basis: 68px;
            flex-shrink: 0;
            white-space: nowrap;
            .item {
              width: 68px;
              height: 24px;
              line-height: 24px;
              padding: 0 10px;
              margin-right: 10px;
              text-align: center;
              border-radius: 4px;
              background-color: #f1f1f1;
              box-sizing: border-box;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              transition: 0.25s;
            }
          }
        }
        .childrens_open {
          width: 20px;
          height: 16px;
          padding-left: 2px;
          border-left: 1px solid #eee;
          box-sizing: border-box;
        }
      }
      .product_list {
        .product {
          padding: 0 0 12px;
          border-bottom: 1px solid #f1f1f1;
          background-color: #fff;
          box-sizing: border-box;
          /deep/.van-card__thumb {
            width: 80px;
            height: 80px;
            border-radius: 10px;
          }
          /deep/.van-card__content {
            min-height: 100%;
          }
          /deep/.van-card__bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 32px;
          }
          /deep/.van-card__num {
            line-height: 0;
          }
          .price1 {
            font-size: 16px;
            color: #b60102;
          }
          .price2 {
            font-size: 12px;
            color: #b2b2b2;
            text-decoration: line-through;
            margin-left: 5px;
          }
          .join {
            width: 28px;
            height: 28px;
          }
        }
      }
    }
  }
  .all_childrens {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 30px;
    box-sizing: border-box;
    .all_list {
      display: flex;
      flex-flow: row wrap;
      font-size: 12px;
      margin-bottom: 16px;
      padding: 10px;
      box-sizing: border-box;
      .item {
        width: 68px;
        height: 24px;
        line-height: 24px;
        padding: 0 10px;
        margin-right: 10px;
        margin-bottom: 8px;
        text-align: center;
        border-radius: 4px;
        background-color: #f1f1f1;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        transition: 0.25s;
      }
    }
    .packup {
      color: #c9c9c9;
      font-size: 14px;
      text-align: center;
      .bottom_text {
        position: absolute;
        height: 30px;
        line-height: 30px;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        box-sizing: border-box;
      }
    }
  }
  .active {
    color: #fff;
    background-color: #ff7733 !important;
  }
  // 修改遮罩层覆盖
  /deep/ .van-overlay {
    position: absolute;
  }
  /deep/ .van-popup {
    position: absolute;
  }
  /deep/.van-loading {
    display: none;
  }
}
</style>